<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>XX商城</title>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_408825_9pecp3wxz7z7u8fr.css"/>
		<link rel="stylesheet" type="text/css" href="css/xxPublic.css"/>
		<link rel="stylesheet" type="text/css" href="css/xxMall.css"/>
	</head>
	<body>
		<footer class="footerBox">
			<a href="#">
				<i class="iconfont icon-index"></i>
				<span>首页</span>
			</a>
			<a href="#">
				<i class="iconfont icon-cubes"></i>
				<span>线下服务</span>
			</a>
			<a href="#" class="active">
				<i class="iconfont icon-heart"></i>
				<span>收藏</span>
			</a>
			<a href="#">
				<i class="iconfont icon-cart"></i>
				<span>购物车</span>
			</a>
			<a href="#">
				<i class="iconfont icon-juxing-"></i>
				<span>装饰</span>
			</a>
			<a href="#">
				<i class="iconfont icon-user"></i>
				<span>我的</span>
			</a>
		</footer>
		
		<ul class="colleHd">
			<li class="active"><span>品牌收藏</span><em></em></li>
			<li><span>商品收藏</span><em></em></li>
			<li><span>浏览足迹</span></li>
		</ul>
		
		
		<div class="colleCon">
			<div class="colleDiv active">
				<!--无品牌收藏显示-->
				<div class="nonBlank dn" align="center">
					<div class="nonBox">
						<img src="images/nonblank.png"/>
						<p>收藏喜爱品牌&nbsp;随时掌握新动态</p>
					</div>
					<button class="ggBtn">去逛逛</button>
				</div>
				
				<ul class="haveBlank">
					<li>
						<a href="#">
							<div>
								<img src="images/conImg01.png" width="33%"/>
								GUCCI古驰
							</div>
							<div align="right">
								<span>上新<em>90+</em></span>
								<i>&gt;</i>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="images/conImg01.png" width="33%"/>
								GUCCI古驰
							</div>
							<div align="right">
								<span>上新<em>90+</em></span>
								<i>&gt;</i>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="colleDiv">
				<!--无商品收藏显示-->
				<div class="nonGoods dn" align="center">
					<div class="nonBox">
						<img src="images/nongoods.png"/>
						<p>暂无收藏的商品</p>
					</div>
					<button class="ggBtn">去逛逛</button>
				</div>
				
				<ul class="haveGoods">
					<li>
						<a href="#">
							<img src="images/colleImg01.jpg" width="100%"/>
							<p class="goodsTit">前行者LK002金属键盘机械键盘</p>
							<div class="pinglun">
								<span>87345条评论</span>
								<span>99%好评</span>
							</div>
							<div class="price">
								<em>&yen;5999.00</em>
								<button>立即购买</button>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="images/colleImg01.jpg" width="100%"/>
							<p class="goodsTit">前行者LK002金属键盘机械键盘</p>
							<div class="pinglun">
								<span>87345条评论</span>
								<span>99%好评</span>
							</div>
							<div class="price">
								<em>&yen;5999.00</em>
								<button>立即购买</button>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="images/colleImg02.jpg" width="100%"/>
							<p class="goodsTit">前行者LK002金属键盘机械键盘</p>
							<div class="pinglun">
								<span>87345条评论</span>
								<span>99%好评</span>
							</div>
							<div class="price">
								<em>&yen;5999.00</em>
								<button>立即购买</button>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="images/colleImg01.jpg" width="100%"/>
							<p class="goodsTit">前行者LK002金属键盘机械键盘</p>
							<div class="pinglun">
								<span>87345条评论</span>
								<span>99%好评</span>
							</div>
							<div class="price">
								<em>&yen;5999.00</em>
								<button>立即购买</button>
							</div>
						</a>
					</li>
				</ul>
			</div>
			<div class="colleDiv">
				<!--无浏览足迹显示-->
				<div class="nonBrowse dn" align="center">
					<div class="nonBox">
						<img src="images/nonbrowser.png"/>
						<p>暂无浏览记录</p>
					</div>
					<button class="ggBtn">去逛逛</button>
				</div>
				
				<ul class="haveBrowse">
					<li>
						<a href="#">
							<span class="browseImg"><img src="images/colleImg02.jpg"/></span>
							<div class="browserDiv">
								<div class="">
									<p class="goodsTit">前行者LK002金属键盘机械键盘</p>
									<div class="pinglun">
										<span>87345条评论</span>
										<span>99%好评</span>
									</div>
								</div>
								<div class="price">
									<em>&yen;5999.00</em>
									<input type="button" name="" id="" value="立即购买" />
								</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="browseImg"><img src="images/colleImg02.jpg"/></span>
							<div class="browserDiv">
								<div class="">
									<p class="goodsTit">前行者LK002金属键盘机械键盘</p>
									<div class="pinglun">
										<span>87345条评论</span>
										<span>99%好评</span>
									</div>
								</div>
								<div class="price">
									<em>&yen;5999.00</em>
									<input type="button" name="" id="" value="立即购买" />
								</div>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="" id="footerHeight"></div>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(function(){
				$('.colleHd').on('click','li',function(){
					var idx = $(this).index();
					$(this).addClass('active').siblings().removeClass('active');
					$('.colleDiv').eq(idx).addClass('active').siblings().removeClass('active');
					//设置对应显示块的图片宽高1:1
					var colleImg = $('.colleDiv').eq(idx).find('ul img');
					setImgWH(colleImg);
				});
				
				//获取所有列表中的图片对象
				var colleImg = $('.colleDiv').find('ul img');
				setImgWH(colleImg);
				
				//获取底部导航条的高度，赋值给div作为占位
				var footHeight = $('.footerBox').height();
				$('#footerHeight').height(footHeight);
			});
			
			function setImgWH(imgObj){
				imgObj.each(function(){
//					console.log($(this).width());
					$(this).css('height',$(this).width());
				})
			}
		</script>
	</body>
</html>
